<script setup>
import { useCategoryStore } from '@/stores/category'
// import {  onMounted} from 'vue'
 const CategoryStore = useCategoryStore()

</script>
<template>
 <div class="category-father">
    <div class="category">
        <ul class="ulRef">
         <li v-for="(item) in CategoryStore.HeaderList" :key="item.id" ref="liRef" >
                <a href="#">{{ item.name }}</a> 
                <a href="#" v-for="item in item.children.slice(0, 2)" :key="item.id">{{ item.name }}</a>
                <div class="layer">
                        <div  div class="title">
                            <span class="recommend">分类推荐</span>
                            <span class="content">根据您的购买或浏览记录推荐</span>
                        </div>
                        <div class="card">
                        <ul>
                          <li v-for="item in item.goods.slice(0, 9)" :key="item.id">      
                                    <div class="img">
                                       <img :src="item.picture" alt="" width="100%" height="100%">
                                    </div>
                                <div class="text">
                                    <p class="num1 ellipsis" style="font-weight: 700;" >{{ item.name }}</p>
                                    <p class="num1 ellipsis">{{ item.desc }}</p>
                                    <p class="num1" style="color: red; font-size: 20px;">$ {{ item.price }}</p>
                                </div>
                            </li>
                         </ul>
                        </div>
                </div>
         </li>
        </ul>
    </div>
    
</div>
</template>
<style scoped>
.category-father{
    position: relative;
}
.category{
    width: 300px;
    /* height: 700px; */
    background-color: rgba(0, 0, 0, 0.5);
    
    /* opacity: .5; */
}
.category .ulRef{
    height: 100%;
    width: 100%;
}
.category li{
    height: 50px;
}
 
.category a,.category a:nth-child(1){
    line-height: 50px;
    color: #fff;
    margin-left: 10px;
}
.category a:nth-child(1){
    margin-left: 30px;
}
.category li:hover{
    background-color: #27bb9a;
}
.category li:hover .layer{
    display: block;
}
.layer{
    display: none;
    position: absolute;
    top: 0;
    left: 300px;
    width: 900px;
    height: 450px;
}
.layer .title{
    line-height: 50px;
    height: 50px;
    border-bottom: 1px solid #ccc;
}
.layer .recommend{
    font-size: 20px;
    padding: 0 20px;
    font-weight: 700;
}
.layer .content{
    font-weight: 700;
    text-shadow: 2px 2px 2px #bab4b4;
}
.layer .card{
    width: 100%;
    height: 400px;

}
.layer .card ul {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
}
.layer .card ul li{
   display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 100%;
    width: 290px;
    height: 120px;
    margin: 0 5px;
    background-color: #fff;
    border-radius: 10px;
}
.layer .card ul li .img{
    width: 100px;
    height: 100px;
    background-color: blue;
}
.layer .card ul li .text{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    width: 150px;
    height: 100px;
}
.show{
    display: block;
}
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>